<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="proname" label="产品名称" width="240" />
      <el-table-column label="产品图片" width="130">
        <template #default="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.img1"
            :zoom-rate="1.2"
            :preview-src-list="[
              scope.row.img1,
              scope.row.img2,
              scope.row.img3,
              scope.row.img4,
            ]"
            fit="cover"
            :preview-teleported="true"
          />
        </template>
      </el-table-column>
      <el-table-column prop="category" label="产品分类" />
      <el-table-column prop="brand" label="产品品牌" />
      <el-table-column prop="originprice" label="产品价格" />
      <el-table-column prop="discount" label="产品折扣" />
      <el-table-column prop="stock" label="产品库存" />
      <el-table-column label="是否售卖">
        <template #default="scope">
          <el-switch
            v-model="scope.row.issale"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column label="是否推荐">
        <template #default="scope">
          <el-switch
            v-model="scope.row.isrecommend"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column label="是否秒杀">
        <template #default="scope">
          <el-switch
            v-model="scope.row.isseckill"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template #default="scope">
          <el-button>编辑</el-button>
          <el-button type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="margin-top: 20px; justify-content: flex-end"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 20, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
// import { proListApi } from "@/api/index.js";
import { mapActions, mapState } from "vuex";

export default {
  computed: mapState("project", ["tableData"]),
  data() {
    return {
      // tableData: [],
      // 每页条数
      pageSize: 10,
      // 当前第几页
      currentPage: 1,
      total: 0,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    ...mapActions("project", ["asyncGetList"]),
    getData() {
      this.asyncGetList({
        pageSize: this.pageSize,
        currentPage: this.currentPage,
      }).then((total) => {
        this.total = total;
      });
    },

    // async getData() {
    //   const res = await proListApi({
    //     count: this.currentPage,
    //     limitNum: this.pageSize,
    //   });
    //   console.log(res);
    //   this.tableData = res.data;
    //   this.total = res.total;
    // },
    handleSizeChange(val) {
      this.pageSize = val;
      // this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      // this.getData();
    },
  },
  watch: {
    pageSize() {
      this.getData();
    },
    currentPage() {
      this.getData();
    },
  },

  // data() {
  //   return {
  //     list: [],
  //   };
  // },
  // mounted() {
  //   axios.get("http://www.pudge.wang:3080/api/rated/list").then((res) => {
  //     this.list = res.data.result;
  //   });
  // },
  // 页面内守卫
  // 是路由给我们提供的生命周期
  // beforeCreate() {
  //   console.log("beforeCreate");
  // },
  // beforeRouteEnter(to, from, next) {
  //   // console.log("beforeRouteEnter", this);
  //   NProgress.start();
  //   axios.get("http://www.pudge.wang:3080/api/rated/list").then((res) => {
  //     // this.list = res.data.result;
  //     NProgress.done();
  //     next((vm) => (vm.list = res.data.result));
  //   });
  // 在渲染该组件的对应路由被验证前调用
  // 不能获取组件实例 `this` ！
  // 因为当守卫执行时，组件实例还没被创建！
  // },
  // 主要用于动态参数改变的路由跳转
  // 场景：猜你喜欢
  // beforeRouteUpdate(to, from) {
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
  // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
  // },
  // 当需要离开某个路由的时候，可以给用户一个确认的弹框
  // 场景：用于一些有表单输入的页面
  // beforeRouteLeave(to, from) {
  // 在导航离开渲染该组件的对应路由时调用
  // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
  // console.log("路由离开了");
  //   const answer = window.confirm(
  //     "Do you really want to leave? you have unsaved changes!"
  //   );
  //   if (!answer) return false;
  // },
};
</script>

<style>
#nprogress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100% !important;
}

#nprogress .bar {
  height: 5px !important;
  background: Green;
}
</style>
